<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>有蜜</title>
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
.aui-content{
  padding: 0.5rem 1rem;
}
.info{
  padding: 0 0 1.5rem;
}
.comFlexItem{
  height: 2.8rem;
}
select,
input.textInput {
		font-size: 0.7rem;
		height: 2.3rem;
    color: #333;
}
.comFlexItem select,
.comFlexItem input.textInput {
		text-align: left;
		padding: 0 0.5rem;
    padding-right: 2rem;
}
.getCode{
  width: 5.5rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.6rem;
  color: #fff;
  background: #FF8A9C;
  border-radius: 0.2rem;
  text-align: center;
}
.top-title{
  font-size: 1.4rem;

}
.bom-tit{
  color: #363336;
}
input::placeholder{
  font-size: 0.9rem;
  color: #adadad;
}
.comBtmBtn{
  background: -webkit-linear-gradient(#E73350, #FF748A); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#E73350, #FF748A); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#E73350, #FF748A); /* Firefox 3.6 - 15 */
  background: linear-gradient(#E73350, #FF748A); /* 标准的语法 */
}
.comBtmBtn.disable{
  background: #E7E7E7;
  color: #9B9B9B;
}
.bomFixed{
  position: fixed;
  width: 100%;
  bottom: 1rem;
  font-size: 0.6rem;
  color: #adadad;
  text-align: center;
}
.backFix{
  position: fixed;
  bottom: 5rem;
  right: 0;
  width: 3rem;
}
.backFix img{
  height: 1.9rem;
  width: 1.9rem;
}
.inputDel{
  background: url(../image/common/close.png) no-repeat center center;
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  background-size: 0.8rem;
}
</style>
</head>
<body>
  <div class="aui-content">
    <div class="top-title">验证手机号</div>
    <div class="bom-tit aui-font-size-12 color-36">为保障你的财产安全，请验证您的手机号码</div>
    <div class="info">
      <div class="comFlexItem aui-border-b">
        <div class="relative flex-auto">
          <input type="number" name="" value="" placeholder="手机号" class="textInput" id="phone" onKeyUp="changNum(this);">
          <div class="inputDel aui-hide" tapmode onclick="quxiao(this)"></div>
        </div>
      </div>
      <div class="comFlexItem aui-border-b">
        <div class="relative flex-auto">
          <input type="number" maxLength="6" name="" value="" placeholder="验证码" class="textInput inp" id="code" onKeyUp="changNum(this);">
          <!-- <div class="inputDel aui-hide" tapmode onclick="quxiao(this)"></div> -->
        </div>
        <div class="getCode ready" tapmode onclick="getCode(this)">获取验证码</div>
      </div>
      <!-- 直接显示邀请人的 -->
      <div class="peoBox comFlexItem aui-border-b">
        <div class="relative flex-auto">
          <input type="text" name="" value="邀请人" class="textInput" readonly>
          <!-- <div class="inputDel aui-hide" tapmode onclick="quxiao()"></div> -->
        </div>
        <div class="comFlexItem"><img src="../image/demo/01.png" style="height: 1.2rem" alt=""><span class="aui-padded-l-5 aui-font-size-12 color-333">霏霏雨</span></div>
      </div>
      <!-- 邀请码 -->
      <div class="maBox aui-hide">
        <div class="comFlexItem aui-border-b">
          <div class="relative flex-auto">
            <input type="text" name="" value="" placeholder="邀请码" class="textInput" id="yCode"  onKeyUp="changNum(this);">
            <!-- <div class="inputDel aui-hide" tapmode onclick="quxiao()"></div> -->
          </div>
        </div>
        <div class="aui-font-size-14 color-ad aui-padded-t-5">没有邀请码？向给你推荐APP的好友索取</div>
      </div>
    </div>
    <div class="comBtmBtn radius disable" tapmode onclick="next()">验证</div>
    <div class="backFix"><img src="../image/common/wx_back3.png" alt=""></div>
  </div>
  <div class="bomFixed" tapmode onclick="openKefu()">咨询电话：0571-81234567</div>
</body>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
apiready = function(){
	api.parseTapmode();
};
// 获取验证码
var wait = 60;
function getCode(el){
  var phone = $$('#phone').val();
  if(phone){
    time()
  }else{
    alert('请输入手机号')
  }

}
function time(){
	wait--;
	if(wait == 0){
		$$('.getCode').addClass('ready').text('发送验证码');
		wait = 60;
	}else{
		$$('.getCode').text(wait + 's');
		setTimeout(function(){
			time();
		},1000);
	}
}
function changNum(el){
	var _this = $$(el);
	var num = _this.val();
	if(num){
		$$(el).next().removeClass('aui-hide');
	}else{
		$$(el).next().addClass('aui-hide');
	}
  // 邀请人显示
  if($$('.peoBox').hasClass('aui-hide')){
    if($$('#code').val()){
      $$('.comBtmBtn').addClass('disable')
    }
  }else{
    if($$('#code').val()){
      $$('.comBtmBtn').removeClass('disable')
    }
  }
  // 邀请码显示
  if($$('.maBox').hasClass('aui-hide')){
    if($$('#yCode').val()){
      $$('.comBtmBtn').addClass('disable')
    }
  }else {
    if($$('#yCode').val()){
      $$('.comBtmBtn').removeClass('disable')
    }
  }
}
function quxiao(el){
	var inp = $$(el).prev().val('');
  if(inp){
    $$(el).addClass('aui-hide')
  }

}
// 验证
function next(){
  var _this = $$('.textInput');
  var code = _this.val();
  if(code.length > 6 || code.length < 6){
    toast('验证码输入错误')
  }
}
// 打开客服弹框
function openKefu(){
  api.openFrame({
    name: 'mask_kefu',
    url: 'widget://html/mask_kefu.html',
    rect: {
      x: 0,
      y: 0,
      w: 'auto',
      h: 'auto'
    },
    bounces: false,
    animation: {
      type: 'fade',
      duration:300
    }
  });
}
</script>
</html>
